<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
          width: 800px;
          margin: 0 auto;
          padding: 10px;
          border: 1px solid #ccc;
        }
    
        .content {
          width: 700px;
          margin: 0 auto;
        }
    
        .title {
          text-align: center;
        }
    
        .btn {
          height: 40px;
          width: 100px;
          margin-left: 10px;
          padding: 5px 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          cursor: pointer;
        }
    
        .all-count {
          background-color: #1363e3;
          color: #fff;
          padding: 10px 10px;
          border-radius: 5px;
        }
    
        .unfinish-count {
          background-color: #f4ad07;
          color: #fff;
          padding: 10px 10px;
          border-radius: 5px;
        }
    
        .task-input {
          width: 430px;
          height: 30px;
          padding: 5px 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 16px;
        }
    
        .task-list {
          border-radius: 5px;
          list-style: none;
          padding: 0px;
        }
    
        .task-list li {
          padding: 5px;
          border: 1px solid #ccc;
          margin-top: 3px;
          border-radius: 5px;
          height:40px;
          line-height: 40px;
        }
    
        .ckbox {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
    
        .done{
          text-decoration: line-through;
          color: #fff;
          background-color: green;
        }
    
        .normal{
          color: #000;
          background-color: #fff;
        }
      </style>
</head>
<body>
    <div id="app">
        <h1 class="title">我的待办任务</h1>
        <div class="content">
            <p>
                <span class="all-count">任务总数：{{ tasks.length }} 个</span>
                <span class="unfinish-count">未完成：{{ unfinishedCount }} 个</span>
            </p>
            <p>
                <input class="task-input" placeholder="请输入新待办任务" v-model="newTask" @keyup.enter="addTask" />
                <button class="btn" @click="addTask">添加任务</button>
                <button class="btn" @click="clearCompleted">清除已完成</button>
            </p>
            <p>
                <h3>任务列表</h3>
            </p>
            <ul class="task-list">
                <li v-for="(task, index) in tasks" :key="index" :class="{ normal: !task.done, done: task.done }">
                    <input type="checkbox" class="ckbox" :checked="task.done" @change="toggleCompletion(index)" />
                    <input type="text" class="task-input" v-if="task.isEditing" v-model="task.content" @blur="stopEditing(index)" />
                    <span v-else @click="startEditing(index)">{{ task.content }}</span>
                </li>
            </ul>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                tasks: [
                    { content: '学习Vue', done: false, isEditing: false },
                    { content: '学习React', done: true, isEditing: false },
                    { content: '学习Angular', done: false, isEditing: false }
                ],
                newTask: ''
            },
            computed: {
                unfinishedCount() {
                    // 过滤掉数组中为false的一组数据 把为true的数据的长度返回出去 查询出未完成的数据有多少
                    return this.tasks.filter(task => !task.done).length;
                }
            },
            methods: {
                addTask() {
                    if (this.newTask.trim() !== '') {
                        // 将输入的任务添加到数组中 并让其文本框不显示 样式为未完成的样式
                        this.tasks.push({ content: this.newTask, done: false, isEditing: false });
                        this.newTask = ''; // 清空输入框
                    }
                },
                toggleCompletion(index) {
                  //将数组中为false的状态修改为true
                    this.$set(this.tasks, index, { ...this.tasks[index], done: !this.tasks[index].done });
                },
                startEditing(index) {
                  //将数组下标为index的样式修改为已完成状态
                    this.$set(this.tasks, index, { ...this.tasks[index], isEditing: true });
                },
                stopEditing(index) {
                  //将数组下标为index的样式修改为未完成状态
                    this.$set(this.tasks, index, { ...this.tasks[index], isEditing: false });
                },
                clearCompleted() {
                  //过滤掉已完成的任务 保留未完成任务
                    this.tasks = this.tasks.filter(task => !task.done);
                }
            }
        });
    </script>
</body>
</html>